﻿<template>
  <div class="app-container">
    <div class="chart-title with-back">
      <div class="chart-left">
        <div>终端采购单</div>
        <div class="backtrack">
          <el-button @click="comeBack">返回</el-button>
        </div>
      </div>
    </div>
    <div class="goods-condition">
      <div class="search-items">
        <div class="search-title">供货商信息</div>
        <div class="search-content">
          <el-form :inline="true"
                   :model="temp"
                   class="demo-form-inline">
            <el-form-item :label="$t('warehouse.name') + ' :'">
              <drop-down-select :data="warehouseOptions"
                                :count="warehouseCount"
                                :page-size="pageSize"
                                :id="temp.depot_id"
                                :name="temp.depot_name"
                                @getList="(pageNumber, search)=>{return getWarehouse(pageNumber, search,'getWarehouse')}"
                                @addList="(pageNumber, search)=>{return getWarehouse(pageNumber, search,'addWarehouse')}"
                                @choose="(data)=>{return choose(data, 'warehouse')}"
                                @remove="(data)=>{return remove(data, 'warehouse')}"></drop-down-select>
            </el-form-item>
            <el-form-item :label="$t('supplier.name') + ' :'">
              <drop-down-select :data="supplierOptions"
                                :count="supplierCount"
                                :page-size="pageSize"
                                :id="temp.supplier_id"
                                :name="temp.supplier_name"
                                @getList="(pageNumber, search)=>{return getSupplier(pageNumber, search,'getSupplier')}"
                                @addList="(pageNumber, search)=>{return getSupplier(pageNumber, search,'addSupplier')}"
                                @choose="(data)=>{return choose(data, 'supplier')}"
                                @remove="remove('supplier')"></drop-down-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="table-banner"></div>
      <div class="search-table">
        <div class="goods-add-button">
          <div></div>
          <div class="stock-button">
            <button @click="handleCreate()">新增商品</button>
          </div>
        </div>
        <el-table :data="temp.goods_list"
                  border
                  fit
                  highlight-current-row
                  :header-cell-style="{'background-color':'#F2F2F4','color': '#8B94BE'}"
                  style="width: 100%">
          <el-table-column fixed
                           align="center"
                           :label="$t('goods.code_2')">
            <template slot-scope="scope">
              <span>{{ scope.row.code }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           :label="$t('goods.name_1')">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           :label="$t('public.category')">
            <template slot-scope="scope">
              <span>{{ scope.row.category_name_2 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           :label="$t('public.brand')">
            <template slot-scope="scope">
              <span>{{ scope.row.brand_name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           :label="$t('goods.attribute')">
            <template slot-scope="scope">
              <span>{{ scope.row.attribute }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           :label="$t('public.units')">
            <template slot-scope="scope">
              <span>{{ scope.row.units_name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           :label="$t('goods.buyMinMumber_1')">
            <template slot-scope="scope">
              <span>{{ scope.row.buy_min_number }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           :label="$t('public.number')">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.number"
                               :min="0"></el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="table-banner"></div>
      <div class="submit-items">
        <div class="search-title">备注</div>

        <el-form ref="form"
                 :model="temp"
                 @submit.native.prevent>
          <el-form-item>
            <el-input type="textarea"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      placeholder="请输入内容"
                      v-model="temp.remark"></el-input>
          </el-form-item>
          <div class="stock-footer">
            <div></div>
            <div class="operat-form">
              <button @click="submitData"
                      class="adopt">立即创建</button>
            </div>
          </div>
        </el-form>
      </div>
      <!-- 编辑 -->
      <el-dialog :title="textMap[dialogStatus]"
                 :visible.sync="dialogFormVisible">
        <el-form ref="dataForm"
                 :rules="rules"
                 :model="tabledata"
                 @submit.native.prevent>
          <div class="pops">
            <div class="pops-normal">
              <el-form-item :label="$t('terminal.name')"
                            prop="chooseItems">
                <el-select v-model="tabledata.chooseItems"
                           multiple
                           collapse-tags
                           style="margin-left: 20px;"
                           placeholder="请选择">
                  <el-option v-for="item in goodsListOptions"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <div slot="footer"
                   class="dialog-footer">
                <div>
                </div>
                <div>
                  <el-button @click="dialogFormVisible = false">{{ $t("table.cancel") }}</el-button>
                  <el-button type="primary"
                             @click="createData()">{{ $t("table.confirm") }}</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script type="text/javascript">
import dropDownSelect from "@/views/select/dropDownSelect"; // 分页选择控件
export default {
  name: "PurchaseRequisition",
  components: {
    "drop-down-select": dropDownSelect
  },
  data() {
    return {
      chartData: undefined,
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        edit: "编辑",
        create: "添加",
        review: "审核",
        read: "查看"
      },
      rules: {
        chooseItems: [{ required: true, message: "请选择商品", trigger: "change" }]
      },
      warehouseOptions: [],
      warehouseCount: undefined,
      supplierOptions: [],
      supplierCount: undefined,
      temp: {
        depot_id: undefined,
        depot_name: "",
        suupplier_id: undefined,
        suupplier_name: "",
        remark: "",
        goods_list: []
      },
      tabledata: {
        chooseItems: []
      },
      result: [],
      goodsOptions: [],
      goodsListOptions: [],
      pageSize: 20

    };
  },
  methods: {
    comeBack() {
      this.$router.push("/purchase-data/purchase-requisition-list");
    },
    // 添加商品
    handleCreate() {
      if (this.temp.supplier_id) {
        if (this.goodsOptions.length > 0) {
          if (this.temp.goods_list.length > 0) {
            const officers = this.temp.goods_list;
            const goods_list = officers.map(officer => officer.id);
            let goodsListOptions = [];
            this.goodsOptions.forEach(element => {
              if (goods_list.indexOf(element.id) === -1) {
                goodsListOptions.push(element)
              }
            })
            this.goodsListOptions = goodsListOptions;
          } else {
            this.goodsListOptions = this.goodsOptions;
          }

          if (this.goodsListOptions.length > 0) {
            this.dialogFormVisible = true;
            this.tabledata.chooseItems = [];
            this.$nextTick(() => {
              this.$refs["dataForm"].clearValidate();
            });
          } else {
            this.$message.error('该供货商无更多商品');
          }
        } else {
          this.$message.error('该供货商未提供任何商品');
        }
      } else {
        this.$message.error('请选择供货商');
      }
    },
    createData() {
      this.$refs["dataForm"].validate(valid => {
        const choose = this.tabledata.chooseItems;
        if (valid && choose.length > 0) {
          const goods_list = [];
          this.goodsOptions.forEach(element => {
            if (choose.indexOf(element.id) !== -1) {
              goods_list.push(element);
            }
          });
          this.$set(this.temp, 'goods_list', this.temp.goods_list.concat(goods_list))
          this.dialogFormVisible = false;
        }
      });
    },
    // 提交申请
    submitData() {
      if (!this.temp.depot_id) {
        this.$message.error('请选择仓库');
        return false
      }
      if (!this.temp.supplier_id) {
        this.$message.error('请选择商家');
        return false
      }
      let goods_list = [];
      if (this.temp.goods_list.length > 0) {
        this.temp.goods_list.forEach(element => {
          if (element.number > 0) {
            goods_list.push({ goods_id: element.id, number: element.number })
          }
        })
      }
      if (goods_list.length > 0) {
        const path = {
          app: "goods",
          api: "api_goods_index_addGoodsRequest",
          version: "1.0",
          type: 2,
          data: {
            depot_id: this.temp.depot_id ? this.temp.depot_id : "",
            supplier_id: this.temp.supplier_id ? this.temp.supplier_id : "",
            remark: this.temp.remark ? this.temp.remark : "",
            goods_list: goods_list
          }
        };
        this.socketApi.sendSock(JSON.stringify(path), res => {
          if (res) {
            this.socketData(res);
          }
        });
      } else {
        this.$message.error('至少选择一个商品');
        return false
      }
    },
    getSupplier(pageNumber, search, name) {
      const path = {
        app: "archives",
        api: "api_archives_supplier_getList",
        version: "1.0",
        data: {
          rows: this.pageSize,
          page: pageNumber || 1,
          name: search || "",
          returnType: name || "",
          type: 1
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    choose(data, name) {
      if (name === "warehouse") {
        this.temp.depot_id = data.id;
        this.temp.depot_name = data.name;
      } else if (name === "supplier") {
        this.temp.supplier_id = data.id;
        this.temp.supplier_name = data.name;
        this.changeSupplier();
      }
    },
    remove(name) {
      if (name === "warehouse") {
        this.temp.depot_id = undefined;
        this.temp.depot_name = "";
      } else if (name === "supplier") {
        this.temp.supplier_id = undefined;
        this.temp.supplier_name = "";
        this.goodsOptions = [];
        this.changeSupplier();
      }
    },
    // 选择仓库
    getWarehouse(pageNumber, search, name) {
      const path = {
        app: "depot",
        api: "api_depot_index_getList",
        version: "1.0",
        data: {
          rows: this.pageSize,
          page: pageNumber || 1,
          name: search || "",
          returnType: name || ""
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    changeSupplier() {
      if (this.temp.supplier_id) {
        const path = {
          app: "goods",
          api: "api_goods_index_getList",
          version: "1.0",
          data: {
            supplier_id: this.temp.supplier_id
          }
        };
        this.socketApi.sendSock(JSON.stringify(path), res => {
          if (res) {
            this.socketData(res);
          }
        });
      } else {
        this.goodsOptions = [];
      }
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "api_depot_index_getList" && resj.type === "getWarehouse") {
            this.warehouseOptions = resj.data;
            this.warehouseCount = resj.count;
          } else if (resj.api === "api_depot_index_getList" && resj.type === "addWarehouse") {
            this.warehouseOptions = this.warehouseOptions.concst(resj.data);
          } else if (resj.api === "api_archives_supplier_getList" && resj.type === "getSupplier") {
            this.supplierOptions = resj.data;
            this.supplierCount = resj.count;
          } else if (resj.api === "api_archives_supplier_getList" && resj.type === "addSupplier") {
            this.supplierOptions = this.supplierOptions.concst(resj.data);
          } else if (resj.api === "api_goods_index_getList") {
            const goodList = [];
            if (resj.data.length > 0) {
              resj.data.forEach(element => {
                element.number = 0;
                goodList.push(element)
              })
            }
            this.$set(this, 'goodsOptions', goodList)
          } else if (resj.api === "api_goods_index_addGoodsRequest") {
            this.$notify({
              title: "成功",
              message: "提交成功",
              type: "success",
              duration: 2000
            });
            this.comeBack();
          }
        }
      }
    }
  }
};
</script>
<style scoped>
.search-content {
  display: flex;
}
</style>
